<!DOCTYPE html>
<html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="../js/vue.js"></script>
        </head>
        <body>
            <div id="root">
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
            </div>
            </body>
            <script>
                 /* 
                    1.Vue中的数据代理:
                    通过vm对象代理data对象对属性的操作（读/写）
                    2.好处:
                    更加方便操作data中的元素
                    3.基本原理:
                    调用Object.defineProperty方法,把data中的属性添加到vm中，
                    为每一个属性添加getter和setter方法，
                    在getter和setter内部操作data中对应的属性。
                 */
                Vue.config.productionTip = false;
               const vm = new Vue({
                    el:"#root",
                    data(){
                        return{
                            name: "尚硅谷",
                            address: "北京"
                        };
                    }
                });
            </script>
        
</html>